<template>
  <div class="editGoods">
    <div class="formAlert">
      <el-form ref="form" label-width="130px" size="medium">
        <el-form-item label="专用用户">
          <el-input v-model="goodsObj.blongUser" class="inp" placeholder="请输入专用用户"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="goodsObj.goodsName" class="inp" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="goodsObj.price" class="inp" type="number" placeholder="请输入单价"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="goodsObj.num" type="number" class="inp" placeholder="请输入数量"></el-input>
        </el-form-item>
        <el-form-item label="对接网店管家商品匹配码">
          <el-input v-model="goodsObj.matchCode" disabled class="inp" placeholder="请设置商品匹配码"></el-input>
          <b class="button-text" @click="editMatchCode">修改</b>
        </el-form-item>
        <el-form-item label="商品主图">
          <div>
            <imgUpload :imgList="goodsObj.imgList" max="3"></imgUpload>
          </div>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" :rows="3" class="textareaInp" placeholder="请输入商品描述" v-model="goodsObj.description">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="footerBtn">
      <b class="button-w" @click="cancel">取消</b>
      <b class="button-n">提交</b>
    </div>
    <AlertBox :show="matchCodeObj.show" title="商品匹配码" @sureClick="sureFixedMatchCode" @close="matchCodeObj.show=false">
      <div class="formAlert" slot="cont">
        <el-form ref="form" label-width="150px" size="medium">
          <el-form-item label="商品匹配码">
            <el-input v-model="matchCodeObj.matchCode" class="inp"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </AlertBox>
  </div>
</template>
<script type="text/ecmascript-6">
import ImgUpload from '@base/imgUpload'
import AlertBox from '@base/alertBox'
export default {
  name: 'editGoods',
  components: {
    ImgUpload,
    AlertBox
  },
  data () {
    return {
      goodsObj: {
        blongUser: '',
        goodsName: '',
        price: '',
        num: '',
        matchCode: '',
        imgList: [],
        description: ''
      },
      matchCodeObj: {
        show: false,
        matchCode: ''
      }
    }
  },
  methods: {
    cancel () { // 取消 返回上一步
      window.history.go(-1)
    },
    editMatchCode () { // 编辑商品匹配码
      this.matchCodeObj = {
        ...this.matchCodeObj,
        show: true
      }
    },
    sureClick () { // 提交按钮

    }
  },
  beforeRouteEnter (to, from, next) {
    if (to.query.goodsId) {
      document.title = '修改商品'
    } else {
      document.title = '添加商品'
    }
    next()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.editGoods
  padding-left 100px
  .button-text
    margin-left 20px
  .footerBtn
    padding-left 140px
    margin-top 50px
    margin-bottom 100px
</style>
